<template>
    <div>
        <el-card class="box-card" :body-style="{ padding: '10px' }">
            <div class="pagination-wrapper">
                <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
                    <el-form-item label="车位号:">
                        <el-input v-model="keyword.vehicle" placeholder="请输入车位号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <!-- 列表 -->
        <el-card class="box-card" :body-style="{ padding: '10px' }">
            <el-table  :data="historicalRentalList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="编号" align="center" prop="id" />
                <el-table-column label="车位号" align="center" prop="parkingSpaceNumber" />
                <el-table-column label="车牌号" align="center" prop="licensePlateNumber" />
                <el-table-column label="出租时间" align="center" prop="rentStartDate" />
                <el-table-column label="到期时间" align="center" prop="rentEndDate" />
                <el-table-column label="业主" align="center" prop="ownerName" />
                <el-table-column label="住址" align="center" prop="buildingNumber" />
                <el-table-column label="联系电话" align="center" prop="contactNumber" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 编辑的对话框1 -->
        <el-dialog title="车位转租" :visible.sync="dialogUpdateVisible">
            <el-form :model="ParkingSystemFrom">
                <el-form-item label="车位号" prop="activityName">
                    <el-input v-model="ParkingSystemFrom.parkingSpaceNumber" autocomplete="off" style="width:300px"></el-input>
                </el-form-item>
                <div class="block">
                    <span class="demonstration">默认</span>
                    <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="ParkingSystemFrom.rentTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="出租日期"
                    end-placeholder="到期日期"
                    >
                    </el-date-picker>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateInfo()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页 -->
        <el-card class="box-card" :body-style="{ padding: '10px' }">
            <div class="pagination-wrapper">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[5, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import{ ParkingSystemAll,OwnerByIdName,ParkingSpaceInfoById,UpdateParkingSystemlById,DeleteParkingSystemlById,DistinctBuildingNumber,DistinctUseStatus,exportUnit } from "@/api/psm/ParkingSystem"
import {historicalRentalAll,selectByParkingSpaceInfoId,updateHistoryVehicle} from "@/api/psm/HistoryVehicle"
export default {
    data () {
        return {
            //分页参数
            currentPage: 1,
            total: 0,
            pageSize: 5,
            pageNum: 1,
            //列表数据
            historicalRentalList: [],
            formLabelWidth: "140px",
            //多选框
            measureCodes: [],
            ids: [],
            //弹框表单
            ParkingSystemFrom: {
                parkingSpaceId: '',
                parkingSpaceNumber: '',
                rentTime: [],
            },
            //搜索条件
            keyword: {
                vehicle: '',
            },
            //批量修改转化客户弹框
            dialogUpdateVisible: false,
            //弹框标题
            title: '',
            value1: [],
            
        }
    },
    methods: {
        //获取展示数据
        fetchData() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                vehicle:this.keyword.vehicle,
            }
            console.log(params)
            historicalRentalAll(params).then(res => {
                this.total = res.data.total
                this.historicalRentalList = res.data.list
            })
        },
        // 模糊搜索
        search() {
            this.fetchData()
        },
        // 多选框选中数据
        handleSelectionChange(selectionRowArr) {
            this.ids = [];
            console.log(selectionRowArr)
            for (let i = 0; i < selectionRowArr.length; i++) {
                this.ids.push(selectionRowArr[i].id)
            }
            // console.log("ids", this.ids)
        },

        handleDelete(row) {
            console.log(row.id)
            // console.log(index, row);
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    DeleteParkingSystemlById(row.id).then((response) => {
                        console.log(response);
                        if (response.code == 200) {
                        if(response.data == 1){  
                            this.$message.success('删除成功')
                            this.fetchData()
                         }             
                    }else{
                        this.$message({
                            type: "error",
                            message: response.msg,
                        });
                    }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
         //打开修改弹窗
         handleUpdate(row) {
            this.ParkingSystemFrom.parkingSpaceId = row.id
            console.log(row.id)
            selectByParkingSpaceInfoId(row.id).then(res => {
                console.log(res.data,"查询修改数据")
                this.ParkingSystemFrom = res.data
            })
             this.dialogUpdateVisible = true
        },
        updateInfo() {
            updateHistoryVehicle(this.ParkingSystemFrom).then(res => {
                console.log(res,"修改数据")
                if (res.code == 200) {
                    this.$message.success('修改成功')
                    this.dialogUpdateVisible = false
                    this.fetchData()
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg,
                    });
                }
            })
        },
        // 页面大小改变时触发
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData()
        },
        // 当前页码改变时触发
        handleCurrentChange(val) {
            this.pageNum = val;
            this.fetchData()
        },
    },
    created () {
        this.fetchData()
    },

}
</script>

<style>
.box-card {
    width: 100%;
    margin-top: 10px;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，若需要的话 */
    margin-top: 10px;
    /* Optional: 可以添加 margin 增加间距 */
}
</style>